import React, { useEffect, useState } from 'react';
import { Button, Modal, Form, Input, InputNumber } from 'antd';
import { useSelector, useDispatch } from "umi"

type Props = {
    updateModel: boolean,
    updateClose(value: boolean): void
}

const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 16 },
};

/* eslint-disable no-template-curly-in-string */
const validateMessages = {
    required: '${label} is required!',
    types: {
        email: '${label} is not a valid email!',
        number: '${label} is not a valid number!',
    },
    number: {
        range: '${label} must be between ${min} and ${max}',
    },
};
/* eslint-enable no-template-curly-in-string */

const onFinish = (values: any) => {
    console.log(values);
};

const OrderManageUpdate = (props: Props) => {

    const [open, setOpen] = useState(false);
    const [confirmLoading, setConfirmLoading] = useState(false);
    const [modalText, setModalText] = useState('Content of the modal');
    const [form] = Form.useForm()
    const orderState = useSelector((state: { order: any, updateOrder: any }) => {
        //state整个仓库i数据，product是仓库命名空间
        // console.log("cang",state.order.updateOrder);
        return state.order
    })
    const dispatch=useDispatch()
    // const updateModel=props.updateModel
    useEffect(() => {
        setOpen(props.updateModel);

    }, [props.updateModel])

    useEffect(() => {
        let updateList = orderState.updateOrder
        if (updateList.length > 0) {
            // console.log("orderState", updateList[0]);
            form.setFieldsValue({
                _id: updateList[0].order_id,
                pay_actual:updateList[0].pay.pay_actual,
                status:updateList[0].status,
                note:updateList[0].note,
                pay_integral:updateList[0].pay.pay_integral
            })
        }

    }, [orderState])

    useEffect(() => {
        // console.log("orderState",orderState);
    }, [])


    const handleOk = () => {
        //提交修改
        const values=form.getFieldsValue();
        dispatch({
            type: "order/update",
            payload: values
        })
        setModalText('The modal will be closed after two seconds');
        setConfirmLoading(true);
        setTimeout(() => {
            setOpen(false);
            props.updateClose(false)
            setConfirmLoading(false);
        }, 500);
    };

    const handleCancel = () => {
        // console.log('Clicked cancel button');
        props.updateClose(false)
        setOpen(false);
    };


    return (
        <>
            <Modal
                title="修改订单"
                open={open}
                onOk={handleOk}
                confirmLoading={confirmLoading}
                onCancel={handleCancel}
            >
                <>
                    <Form
                        {...layout}
                        name="nest-messages"
                        onFinish={onFinish}
                        style={{ maxWidth: 600 }}
                        validateMessages={validateMessages}
                        form={form}
                    >
                        <Form.Item name={"_id"} label="订单编号"   >
                            <Input disabled />
                        </Form.Item>
                        <Form.Item name={'pay_actual'} label="支付金额" rules={[{ type: 'number', min: 0, max: 99 }]}>
                            <InputNumber disabled />
                        </Form.Item>
                        <Form.Item name={'status'} label="订单状态" rules={[{ type: 'number', min: 0, max: 99 }]}>
                            <InputNumber disabled />
                        </Form.Item>
                        <Form.Item name={"note"} label="订单备注"   >
                            <Input />
                        </Form.Item>
                        <Form.Item name={'pay_integral'} label="赠送积分" rules={[{ type: 'number', min: 0, max: 99 }]}>
                            <InputNumber />
                        </Form.Item>
                        {/* <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
                            <Button type="primary" htmlType="submit">
                                Submit
                            </Button>
                        </Form.Item> */}
                    </Form>
                </>
            </Modal>
        </>
    )
}

export default OrderManageUpdate